:host {
  display: block;
}

.td-search-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-content: center;
  max-width: 100%;
  justify-content: flex-end;
  align-items: center;
  position: relative;

  .td-search-icon {
    &.td-search-icon-active {
      margin-right: -48px;
      margin-left: 0;
      z-index: 1;
    }
  }

  td-search-input {
    --mdc-filled-text-field-container-color: transparent;
    --mat-form-field-state-layer-color: transparent;
    --mdc-filled-text-field-active-indicator-color: transparent;
    --mdc-filled-text-field-hover-active-indicator-color: transparent;

    ::ng-deep {
      [dir='rtl'] & {
        margin-left: 0 !important;
      }

      .mat-mdc-text-field-wrapper.mdc-text-field {
        padding-left: 48px;
        overflow: visible;
      }

      .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
        bottom: -1px;
      }
    }
  }
}
